// 地图初始化与交互功能
let map;
let isOfflineMode = false;
let currentMapType = 'vector'; // 默认矢量图
let showLabels = true;

// DOM元素
const mapContainer = document.getElementById('map');
const mapTypeSelector = document.getElementById('map-type');
const mapModeSelect = document.getElementById('map-mode');
const saveCurrentViewBtn = document.getElementById('save-current-view');
const minZoomInput = document.getElementById('min-zoom');
const maxZoomInput = document.getElementById('max-zoom');
const downloadStatus = document.getElementById('download-status');
const progressBar = document.getElementById('progress-bar');
const statusText = document.getElementById('status-text');
const savedMapsList = document.getElementById('saved-maps-list');
const loadingOverlay = document.getElementById('loading-overlay');
const sidebar = document.querySelector('.sidebar');

// 页面加载完成时执行的初始化函数
window.addEventListener('DOMContentLoaded', async () => {
    console.log('DOM加载完成，开始初始化地图');
    
    // 确保侧边栏默认显示
    if (sidebar) {
        sidebar.style.display = 'block';
        console.log('侧边栏默认显示');
    }
    
    // 初始化地图
    await initMap();
    
    // 加载已保存的地图列表（无论当前模式如何）
    await loadSavedMaps();
    
    // 添加事件监听器
    setupEventListeners();
    
    // 更新UI状态
    updateUIState();
});

// 设置事件监听器
function setupEventListeners() {
    console.log('设置事件监听器');
    
    // 侧边栏切换按钮事件
    const toggleSidebarBtn = document.getElementById('toggle-sidebar');
    if (toggleSidebarBtn) {
        toggleSidebarBtn.addEventListener('click', toggleSidebar);
        console.log('侧边栏切换按钮事件已绑定');
    }
    
    // 地图类型选择器变更事件
    if (mapTypeSelector) {
        mapTypeSelector.addEventListener('change', async () => {
            const selectedType = mapTypeSelector.value;
            await changeMapType(selectedType);
        });
    }
    
    // 地图模式选择器变更事件
    if (mapModeSelect) {
        mapModeSelect.addEventListener('change', async () => {
            const newMode = mapModeSelect.value;
            // 调用API设置模式
            fetch('/api/map/set-mode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ mode: newMode })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    isOfflineMode = newMode === 'offline';
                    // 更新模式显示
                    if (window.updateModeDisplay) {
                        window.updateModeDisplay(newMode);
                    }
                    // 重新初始化地图以应用新模式
                    if (map) {
                        map.remove(); // 移除现有地图
                    }
                    initMap();
                    updateUIState();
                } else {
                    // 如果失败，恢复原始值
                    fetch('/api/map/get-mode')
                        .then(res => res.json())
                        .then(modeData => {
                            mapModeSelect.value = modeData.mode || 'offline';
                        });
                }
            })
            .catch(error => {
                console.error('切换地图模式失败:', error);
                // 如果出错，恢复原始值
                    fetch('/api/map/get-mode')
                        .then(res => res.json())
                        .then(modeData => {
                            mapModeSelect.value = modeData.mode || 'offline';
                        });
            });
        });
    }
    
    // 保存当前视图按钮点击事件
    if (saveCurrentViewBtn) {
        saveCurrentViewBtn.addEventListener('click', saveCurrentView);
    }
    
    // 标注复选框变更事件
    const showLabelsCheckbox = document.getElementById('show-labels');
    if (showLabelsCheckbox) {
        showLabelsCheckbox.addEventListener('change', async (e) => {
            showLabels = e.target.checked;
            console.log('标注显示状态变更为:', showLabels);
            // 重新加载地图样式以应用标注设置
            await changeMapType(currentMapType);
        });
    }
    
    // X/Y标号复选框变更事件
    const showTileCoordsCheckbox = document.getElementById('show-tile-coords');
    if (showTileCoordsCheckbox) {
        console.log('初始化瓦片坐标复选框');
        
        // 初始化时检查复选框状态
        if (showTileCoordsCheckbox.checked) {
            console.log('复选框已选中，尝试显示瓦片坐标');
            // 添加小延时确保地图完全准备就绪
            setTimeout(updateTileCoordinates, 500);
        }
        
        // 监听复选框变化
        showTileCoordsCheckbox.addEventListener('change', (e) => {
            console.log('瓦片坐标复选框状态改变:', e.target.checked);
            if (e.target.checked) {
                updateTileCoordinates();
            } else {
                removeTileCoordinates();
            }
        });
    } else {
        console.warn('未找到瓦片坐标复选框元素');
    }
}

// 初始化地图
async function initMap() {
    try {
        // 显示加载状态
        loadingOverlay.style.display = 'flex';
        
        // 获取当前地图模式
        let mode;
        try {
            const modeResponse = await fetch('/api/map/get-mode');
            const modeData = await modeResponse.json();
            mode = modeData.mode || 'offline';
            isOfflineMode = mode === 'offline';
            
            // 更新下拉框的值
            if (mapModeSelect) {
                mapModeSelect.value = mode;
            }
            
            // 更新模式显示
            if (window.updateModeDisplay) {
                window.updateModeDisplay(mode);
            }
            
            console.log('获取地图模式成功:', mode);
        } catch (error) {
            console.error('获取地图模式失败:', error);
            mode = 'offline'; // 默认离线模式
            isOfflineMode = true;
        }
        
        // 获取地图配置
        const configResponse = await fetch('/api/map/config');
        const config = await configResponse.json();
        const { apiKey, center, zoom } = config;

        // 获取标注复选框状态
        showLabels = document.getElementById('show-labels')?.checked ?? true;
        
        // 根据模式选择不同的样式
        const styleUrl = isOfflineMode ? `/api/map/offline-style?type=${currentMapType}&showLabels=${showLabels}` : `/api/map/style?type=${currentMapType}&showLabels=${showLabels}`;
        console.log('使用样式URL:', styleUrl);
        
        // 初始化地图
        map = new maplibregl.Map({
            container: mapContainer,
            style: styleUrl,
            center: center,
            zoom: zoom,
            antialias: true,
            attributionControl: true,
            // 设置字体加载路径指向本地字体目录 - 使用绝对路径
            glyphs: '/data/demotiles/font/{fontstack}/{range}.pbf'
        });
        
        // 字体配置已设置
        // 添加字体配置调试日志
        console.log('地图初始化中 - 字体路径配置:', '/data/demotiles/font/{fontstack}/{range}.pbf');

        // 添加控件
        map.addControl(new maplibregl.NavigationControl(), 'top-right');
        map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
        map.addControl(new maplibregl.AttributionControl({
            customAttribution: '© 天地图 数据'  
        }), 'bottom-right');

        // 地图加载完成事件
        map.on('load', () => {
            console.log('地图加载完成');
            loadingOverlay.style.display = 'none';
            
            // 尝试禁用瓦片请求缓存（移除不存在的方法调用）
            try {
                const source = map.getSource('raster-tiles');
                if (source) {
                    console.log('瓦片源存在，但不支持setCacheSize方法');
                }
            } catch (e) {
                console.log('瓦片缓存控制不可用');
            }
            
            // 监听瓦片加载错误事件（离线模式下）
            if (isOfflineMode) {
                setupTileErrorHandler();
            }
            
            // 地图加载完成后，重新加载已保存的地图列表
            loadSavedMaps().catch(error => {
                console.error('地图加载完成后加载已保存地图失败:', error);
            });
        });
        
        // 添加地图样式加载错误处理
        map.on('error', (error) => {
            console.error('地图加载错误:', error.error);
            loadingOverlay.style.display = 'none';
            alert(`地图加载失败: ${error.error.message || '未知错误'}`);
        });

        // 地图移动结束事件
        map.on('moveend', () => {
            updateMapInfo();
        });

        // 地图缩放结束事件
        map.on('zoomend', () => {
            updateMapInfo();
        });

    } catch (error) {
        console.error('地图初始化失败:', error);
        alert('地图加载失败，请检查网络连接或API密钥');
        loadingOverlay.style.display = 'none';
    }
}

// 诊断函数 - 检查字体配置和路径问题
function diagnoseFontLoading() {
    console.log('开始诊断字体加载问题...');
    
    // 检查地图实例状态
    console.log('地图实例是否存在:', !!map);
    
    // 检查字体路径配置
    if (map) {
        // 字体路径检查已移除
    }
    
    // 检查标签图层配置
    if (map && map.getLayer('tile-coordinates-labels')) {
        const labelLayer = map.getLayer('tile-coordinates-labels');
        // 添加安全检查，确保layout属性存在
        if (labelLayer && labelLayer.layout) {
            console.log('标签图层字体配置:', labelLayer.layout['text-font'] || '未设置');
        } else {
            console.log('标签图层存在但layout属性未定义');
        }
    }
    
    // 尝试直接加载字体文件测试
    const fontStack = 'Noto Sans Regular';
    const range = '0-255';
    const fontUrl = `/data/demotiles/font/${fontStack}/${range}.pbf`;
    console.log('尝试加载字体文件:', fontUrl);
    
    // 发送请求检查字体文件是否可访问
    fetch(fontUrl)
        .then(response => {
            if (response.ok) {
                console.log('字体文件可成功访问:', fontUrl);
            } else {
                console.error('字体文件访问失败，HTTP状态码:', response.status);
                // 尝试常见的替代路径格式
                const alternativeUrls = [
                    `/data/demotiles/font/Open Sans Regular,Arial Unicode MS Regular/${range}.pbf`,
                    `/font/Open Sans Regular/${range}.pbf`,
                    `/demotiles/font/Open Sans Regular/${range}.pbf`
                ];
                
                alternativeUrls.forEach(url => {
                    console.log('尝试替代路径:', url);
                });
            }
        })
        .catch(error => {
            console.error('字体文件请求错误:', error.message);
        });
    
    // 检查本地目录结构是否正确
    console.log('请确认本地目录结构:');
    console.log('  - data/demotiles/font/Open Sans Regular/0-255.pbf');
    console.log('  - data/demotiles/font/Arial Unicode MS Regular/0-255.pbf');
}

// 更新地图信息
function updateMapInfo() {
    const center = map.getCenter();
    const zoom = map.getZoom();
    const bounds = map.getBounds();
    
    console.log(`当前中心坐标: [${center.lng.toFixed(6)}, ${center.lat.toFixed(6)}]`);
    console.log(`当前缩放级别: ${zoom.toFixed(2)}`);
    console.log(`当前边界: 西南[${bounds.getSouthWest().lng.toFixed(6)}, ${bounds.getSouthWest().lat.toFixed(6)}], 东北[${bounds.getNorthEast().lng.toFixed(6)}, ${bounds.getNorthEast().lat.toFixed(6)}]`);
    
    // 更新z参数显示
    const currentZoomElement = document.getElementById('current-zoom');
    if (currentZoomElement) {
        currentZoomElement.textContent = Math.round(zoom);
    }
    
    // 如果启用了瓦片坐标显示，则更新瓦片标号
    const showTileCoordsCheckbox = document.getElementById('show-tile-coords');
    if (showTileCoordsCheckbox && showTileCoordsCheckbox.checked) {
        updateTileCoordinates();
    }
}

// 设置瓦片加载错误处理器
function setupTileErrorHandler() {
    if (!map) return;
    
    // 记录瓦片错误的计数器
    let tileErrorCount = 0;
    const maxErrorNotifications = 1; // 限制错误通知次数
    
    // 监听瓦片加载事件
    map.on('tile.error', (e) => {
        tileErrorCount++;
        console.warn(`瓦片加载错误 (${tileErrorCount}):`, e.error);
        
        // 只显示有限次数的错误提示，避免干扰用户
        if (tileErrorCount <= maxErrorNotifications) {
            // 不使用alert，而是在控制台显示警告，并可以考虑添加到状态区域
            console.warn('部分地图瓦片加载失败，这在离线模式下是正常的。请确保您已下载了当前区域和缩放级别的瓦片。');
            
            // 如果有状态显示区域，可以更新它
            if (statusText) {
                statusText.textContent = '部分瓦片加载失败，请确保已下载当前区域';
                setTimeout(() => {
                    statusText.textContent = '离线模式 - 就绪';
                }, 5000);
            }
        }
    });
    
    console.log('瓦片错误处理器已设置');
}

// 切换地图类型
async function changeMapType(type) {
    currentMapType = type;
    
    if (map) {
        try {
            loadingOverlay.style.display = 'flex';
            console.log(`正在切换到${type}地图`);
            
            // 统一使用在线模式的样式URL，服务器端会根据实际运行模式返回相应的配置
            showLabels = document.getElementById('show-labels')?.checked ?? true;
            const styleUrl = `/api/map/style?type=${type}&showLabels=${showLabels}`;
            console.log(`统一使用样式URL: ${styleUrl}`);
            
            // 先清除现有的事件监听器，避免多个事件监听导致问题
            map.off('style.load');
            map.off('error');
            
            // 创建延迟检查机制，在设置样式后定期检查地图状态
            let checkInterval;
            const checkMapReadyPromise = new Promise((resolve) => {
                // 设置样式
                map.setStyle(styleUrl);
                
                // 立即添加事件监听
                map.once('style.load', () => {
                    console.log(`${type}地图加载成功（通过事件）`);
                    clearInterval(checkInterval);
                    // 在离线模式下重新设置瓦片错误处理器
                    if (isOfflineMode) {
                        setupTileErrorHandler();
                    }
                    resolve();
                });
                
                map.once('error', (error) => {
                    console.error(`${type}地图加载错误:`, error.error);
                    clearInterval(checkInterval);
                    // 即使有错误，我们也继续执行，因为地图可能已经部分加载
                    resolve();
                });
                
                // 添加轮询检查，每500毫秒检查一次地图状态
                checkInterval = setInterval(() => {
                    try {
                        // 检查地图是否有样式和图层
                        if (map.getStyle() && map.getStyle().layers && map.getStyle().layers.length > 0) {
                            console.log(`${type}地图加载成功（通过状态检查）`);
                            clearInterval(checkInterval);
                            // 在离线模式下重新设置瓦片错误处理器
                            if (isOfflineMode) {
                                setupTileErrorHandler();
                            }
                            resolve();
                        }
                    } catch (e) {
                        console.log('地图状态检查中...');
                    }
                }, 500);
            });
            
            // 等待地图准备就绪或超时
            await Promise.race([
                checkMapReadyPromise,
                new Promise((resolve) => setTimeout(() => {
                    console.log('地图加载超时，但继续进行');
                    clearInterval(checkInterval);
                    resolve(); // 超时也继续，不再抛出错误
                }, 15000))
            ]);
            
            loadingOverlay.style.display = 'none';
        } catch (error) {
            console.error('切换地图类型失败:', error);
            loadingOverlay.style.display = 'none';
            // 不再显示错误提示，因为地图可能已经正确加载
        }
    }
}

// 切换离线模式
async function toggleOfflineMode() {
    isOfflineMode = !isOfflineMode;
    
    if (map) {
        // 销毁当前地图实例
        map.remove();
    }
    
    // 重新初始化地图
    await initMap();
    
    // 更新UI状态
    updateUIState();
    
    // 如果是离线模式，加载已保存的地图列表
    if (isOfflineMode) {
        loadSavedMaps();
        
        // 在离线模式下，如果有已保存的地图，可以自动选择第一个
        setTimeout(() => {
            const firstMapBtn = document.querySelector('.view-btn');
            if (firstMapBtn) {
                console.log('自动选择第一个已保存的地图');
                // 不自动触发点击，让用户手动选择
            }
        }, 500);
    }
}

// 保存当前视图离线地图
async function saveCurrentView() {
    if (!map || isOfflineMode) return;
    
    try {
        // 获取当前地图边界和缩放范围
        const bounds = map.getBounds();
        const minZoom = parseInt(minZoomInput.value) || 3;
        const maxZoom = parseInt(maxZoomInput.value) || 15;
        
        // 验证缩放范围
        if (minZoom < 1 || maxZoom > 18 || minZoom >= maxZoom) {
            alert('请输入有效的缩放范围（1-18，且最小缩放<最大缩放）');
            return;
        }
        
        // 显示下载状态
        downloadStatus.style.display = 'block';
        progressBar.style.width = '0%';
        statusText.textContent = '准备下载瓦片...';
        
        // 禁用按钮防止重复点击
        saveCurrentViewBtn.disabled = true;
        
        // 发送保存请求
        const response = await fetch('/api/map/save-offline', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                bounds: {
                    sw: [bounds.getSouthWest().lng, bounds.getSouthWest().lat],
                    ne: [bounds.getNorthEast().lng, bounds.getNorthEast().lat]
                },
                minZoom: minZoom,
                maxZoom: maxZoom,
                mapType: currentMapType,
                showLabels: showLabels
            })
        });
        
        if (!response.ok) {
            throw new Error('保存离线地图失败');
        }
        
        const result = await response.json();
        progressBar.style.width = '100%';
        statusText.textContent = `下载完成: ${result.tilesDownloaded} 个瓦片`;
        
        // 更新已保存地图列表
        loadSavedMaps();
        
        setTimeout(() => {
            downloadStatus.style.display = 'none';
        }, 3000);
        
    } catch (error) {
        console.error('保存离线地图失败:', error);
        statusText.textContent = '下载失败，请重试';
        
        setTimeout(() => {
            downloadStatus.style.display = 'none';
        }, 3000);
    } finally {
        saveCurrentViewBtn.disabled = false;
    }
}

// 加载已保存的离线地图列表
async function loadSavedMaps() {
    console.log('开始加载已保存的地图列表');
    
    try {
        // 发送请求获取已保存的地图列表
        const response = await fetch('/api/map/saved-maps');
        
        if (!response.ok) {
            console.error(`获取已保存地图列表失败，HTTP状态码: ${response.status}`);
            throw new Error(`获取已保存地图列表失败: ${response.status}`);
        }
        
        // 解析响应数据
        const maps = await response.json();
        console.log('获取到已保存地图列表:', maps);
        
        // 获取列表容器
        if (!savedMapsList) {
            console.warn('已保存地图列表容器不存在');
            return;
        }
        
        // 清空列表
        savedMapsList.innerHTML = '';
        
        // 如果没有保存的地图
        if (!maps || maps.length === 0) {
            console.log('已保存地图列表为空');
            const emptyLi = document.createElement('li');
            emptyLi.className = 'no-maps';
            emptyLi.textContent = '暂无已保存的离线地图';
            savedMapsList.appendChild(emptyLi);
            return;
        }
        
        // 添加地图项
        maps.forEach((mapInfo, index) => {
            // 确保地图项数据有效
            if (!mapInfo || !mapInfo.id) {
                console.warn('无效的地图项数据:', mapInfo);
                return;
            }
            
            const li = document.createElement('li');
            li.className = 'saved-map-item';
            
            try {
                const date = new Date(mapInfo.timestamp);
                const dateStr = date.toLocaleString();
                
                li.innerHTML = `
                    <div class="map-info">
                        <strong>地图 ${index + 1}</strong><br>
                        <span>类型: ${getMapTypeLabel(mapInfo.mapType)}</span><br>
                        <span>缩放范围: ${mapInfo.minZoom} - ${mapInfo.maxZoom}</span><br>
                        <span>瓦片数量: ${mapInfo.tilesCount}</span><br>
                        <span>保存时间: ${dateStr}</span>
                        <span>标注: ${mapInfo.showLabels ? '显示' : '隐藏'}</span>
                    </div>
                    <button class="view-btn" data-id="${mapInfo.id}">查看</button>
                    <button class="delete-btn" data-id="${mapInfo.id}">删除</button>
                `;
                
                savedMapsList.appendChild(li);
            } catch (itemError) {
                console.error(`渲染地图项失败 (索引: ${index}):`, itemError);
            }
        });
        
        // 添加事件监听
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const mapId = e.target.dataset.id;
                console.log(`点击查看按钮，地图ID: ${mapId}`);
                viewSavedMap(mapId);
            });
        });
        
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const mapId = e.target.dataset.id;
                console.log(`点击删除按钮，地图ID: ${mapId}`);
                deleteSavedMap(mapId);
            });
        });
        
        console.log(`已成功渲染${maps.length}个已保存地图项`);
        
    } catch (error) {
        console.error('加载已保存地图失败:', error);
        
        if (savedMapsList) {
            savedMapsList.innerHTML = '';
            const errorLi = document.createElement('li');
            errorLi.className = 'error-message';
            errorLi.textContent = `加载失败: ${error.message || '未知错误'}`;
            savedMapsList.appendChild(errorLi);
        }
    }
}

// 获取地图类型标签
function getMapTypeLabel(type) {
    const typeMap = {
        'vector': '矢量地图',
        'image': '卫星影像',
        'terrain': '地形地图'
    };
    return typeMap[type] || type;
}

// 查看已保存的地图
async function viewSavedMap(mapId) {
    console.log('查看已保存地图，ID:', mapId);
    
    try {
        // 显示加载状态
        loadingOverlay.style.display = 'flex';
        
        // 获取地图配置
        const response = await fetch(`/api/map/saved-map/${mapId}`);
        if (!response.ok) {
            throw new Error('获取地图配置失败');
        }
        
        const mapData = await response.json();
        
        // 更新当前地图类型
        currentMapType = mapData.mapType;
        
        // 更新标注显示状态
        showLabels = mapData.showLabels ?? true;
        const showLabelsCheckbox = document.getElementById('show-labels');
        if (showLabelsCheckbox) {
            showLabelsCheckbox.checked = showLabels;
        }
        
        // 在所有模式下都重新加载地图样式以应用新的地图类型和标注设置
        console.log(`切换地图类型为：${mapData.mapType}，标注: ${showLabels}`);
        
        // 清除现有的事件监听器
        map.off('style.load');
        map.off('error');
        
        // 设置新的样式，传入地图类型参数
        let checkInterval;
        const styleLoadPromise = new Promise((resolve) => {
            // 获取更新后的地图样式，并传递地图类型和标注状态
            const styleUrl = isOfflineMode ? 
                `/api/map/offline-style?type=${mapData.mapType}&showLabels=${showLabels}` : 
                `/api/map/style?type=${mapData.mapType}&showLabels=${showLabels}`;
            
            console.log('加载保存的地图样式:', styleUrl);
            map.setStyle(styleUrl);
            
            map.once('style.load', () => {
                console.log('地图样式更新成功');
                clearInterval(checkInterval);
                // 重新设置瓦片错误处理器
                if (isOfflineMode) {
                    setupTileErrorHandler();
                }
                resolve();
            });
            
            map.once('error', (error) => {
                console.error('更新地图样式错误:', error.error);
                clearInterval(checkInterval);
                resolve(); // 即使有错误也继续执行
            });
            
            // 添加轮询检查，每500毫秒检查一次地图状态
            checkInterval = setInterval(() => {
                try {
                    // 检查地图是否有样式和图层
                    if (map.getStyle() && map.getStyle().layers && map.getStyle().layers.length > 0) {
                        console.log('地图样式更新成功（通过状态检查）');
                        clearInterval(checkInterval);
                        if (isOfflineMode) {
                            setupTileErrorHandler();
                        }
                        resolve();
                    }
                } catch (e) {
                    console.log('地图状态检查中...');
                }
            }, 500);
        });
        
        // 等待样式加载完成或超时
        await Promise.race([
            styleLoadPromise,
            new Promise((resolve) => setTimeout(() => {
                console.log('地图样式加载超时，但继续进行');
                clearInterval(checkInterval);
                if (isOfflineMode) {
                    setupTileErrorHandler();
                }
                resolve(); // 超时也继续，不再抛出错误
            }, 10000))
        ]);
        
        // 获取地图边界和缩放范围
        const bounds = mapData.bounds;
        const sw = [bounds.sw[0], bounds.sw[1]];
        const ne = [bounds.ne[0], bounds.ne[1]];
        
        // 设置地图视图到保存的边界
        map.fitBounds([sw, ne], {
            padding: 20,
            duration: 1000,
            maxZoom: mapData.maxZoom
        });
        
        console.log(`已切换到保存的地图：${mapId}，类型：${mapData.mapType}`);
        
        // 更新UI显示
        const mapItem = document.querySelector(`.view-btn[data-id="${mapId}"]`).closest('.saved-map-item');
        document.querySelectorAll('.saved-map-item').forEach(item => {
            item.classList.remove('active');
        });
        if (mapItem) {
            mapItem.classList.add('active');
        }
        
    } catch (error) {
        console.error('查看已保存地图失败:', error);
        alert(`查看已保存地图失败: ${error.message}`);
    } finally {
        loadingOverlay.style.display = 'none';
    }
}

// 删除已保存的地图
async function deleteSavedMap(mapId) {
    if (confirm('确定要删除这个离线地图吗？')) {
        try {
            const response = await fetch(`/api/map/delete-map/${mapId}`, {
                method: 'DELETE'
            });
            
            if (!response.ok) {
                throw new Error('删除失败');
            }
            
            loadSavedMaps(); // 重新加载列表
        } catch (error) {
            console.error('删除地图失败:', error);
            alert('删除失败，请重试');
        }
    }
}

// 更新UI状态
function updateUIState() {
    console.log('更新UI状态，离线模式:', isOfflineMode);
    // 不要禁用地图类型选择器，允许在离线模式下切换地图类型
    mapTypeSelector.disabled = false;
    saveCurrentViewBtn.disabled = isOfflineMode;
    minZoomInput.disabled = isOfflineMode;
    maxZoomInput.disabled = isOfflineMode;
    
    // 根据模式调整侧边栏透明度，但保留当前显示/隐藏状态
    sidebar.style.opacity = isOfflineMode ? '1' : '0.7';
    console.log('更新侧边栏透明度');
}

// 更新瓦片坐标显示
function updateTileCoordinates() {
    if (!map) return;
    
    // 调用诊断函数帮助调试字体问题
    console.log('瓦片坐标功能已启用，正在进行诊断...');
    diagnoseFontLoading();
    
    console.log('开始更新瓦片坐标显示');
    
    // 先移除已有的瓦片坐标
    removeTileCoordinates();
    
    const zoom = map.getZoom();
    const bounds = map.getBounds();
    const z = Math.round(zoom);
    
    // 计算边界内的瓦片范围
    const swTile = lngLatToTile(bounds.getSouthWest().lng, bounds.getSouthWest().lat, z);
    const neTile = lngLatToTile(bounds.getNorthEast().lng, bounds.getNorthEast().lat, z);
    
    // 确保x和y的范围是正确的顺序（小值到大值）
    const minX = Math.min(swTile.x, neTile.x);
    const maxX = Math.max(swTile.x, neTile.x);
    const minY = Math.min(swTile.y, neTile.y);
    const maxY = Math.max(swTile.y, neTile.y);
    
    console.log(`瓦片范围: X(${minX}-${maxX}), Y(${minY}-${maxY}), Z(${z})`);
    
    // 创建一个新的源和图层
    const sourceId = 'tile-coordinates';
    const layerId = 'tile-coordinates-layer';
    const labelLayerId = 'tile-coordinates-labels';
    
    // 生成瓦片边界的GeoJSON数据
    const features = [];
    
    for (let x = minX; x <= maxX; x++) {
        for (let y = minY; y <= maxY; y++) {
            // 创建瓦片边界
            const tileBounds = tileToLngLat(x, y, z);
            
            // 添加瓦片边界多边形
            features.push({
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [[
                        [tileBounds[0], tileBounds[1]],
                        [tileBounds[2], tileBounds[1]],
                        [tileBounds[2], tileBounds[3]],
                        [tileBounds[0], tileBounds[3]],
                        [tileBounds[0], tileBounds[1]]
                    ]]
                },
                properties: {
                    x: x,
                    y: y,
                    z: z
                }
            });
            
            // 添加瓦片中心点（用于显示标签，添加更丰富的属性确保可见性）
            const centerLng = (tileBounds[0] + tileBounds[2]) / 2;
            const centerLat = (tileBounds[1] + tileBounds[3]) / 2;
            
            features.push({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [centerLng, centerLat]
                },
                properties: {
                    x: x,
                    y: y,
                    z: z,
                    label: `X:${x}\nY:${y}`,
                    // 添加更多属性用于不依赖字体的显示方式
                    tileX: x,
                    tileY: y
                }
            });
        }
    }
    
    const geoJsonData = {
        type: 'FeatureCollection',
        features: features
    };
    
    console.log(`生成了${features.length}个GeoJSON要素`);
    
    // 尝试添加或更新图层
    const tryAddLayers = () => {
        try {
            // 检查地图是否已加载样式
            if (!map.isStyleLoaded()) {
                console.log('地图样式尚未加载完成，等待重试...');
                setTimeout(tryAddLayers, 200);
                return;
            }
            
            // 移除可能存在的旧图层
            if (map.getLayer(labelLayerId)) {
                map.removeLayer(labelLayerId);
            }
            if (map.getLayer(layerId)) {
                map.removeLayer(layerId);
            }
            if (map.getSource(sourceId)) {
                map.removeSource(sourceId);
            }
            
            // 添加源
            map.addSource(sourceId, {
                type: 'geojson',
                data: geoJsonData
            });
            console.log('添加瓦片坐标源成功');
            
            // 添加背景图层以增加对比度
            const bgLayerId = 'tile-coordinates-bg';
            if (!map.getLayer(bgLayerId)) {
                map.addLayer({
                    id: bgLayerId,
                    type: 'fill',
                    source: sourceId,
                    filter: ['==', '$type', 'Polygon'],
                    paint: {
                        'fill-color': 'rgba(255, 255, 0, 0.2)',
                        'fill-opacity': 0.7
                    }
                }); // 移除特定参考图层，使用默认顺序
                console.log('添加瓦片背景图层成功，ID:', bgLayerId);
            }
            
            // 注释掉边界图层和数字点图层，移除红色网格线和红色圆圈
            console.log('边界图层和数字点图层已禁用');
            
            // 如果需要重新启用这些图层，请取消下面的注释
            /*
            // 添加边界图层
            map.addLayer({
                id: layerId,
                type: 'line',
                source: sourceId,
                filter: ['==', '$type', 'Polygon'],
                paint: {
                    'line-color': '#FF0000',
                    'line-width': 4,
                    'line-opacity': 1,
                    'line-dasharray': [5, 3]
                }
            });
            
            // 添加数字点图层
            const numberLayerId = 'tile-coordinates-numbers';
            if (!map.getLayer(numberLayerId)) {
                map.addLayer({
                    id: numberLayerId,
                    type: 'circle',
                    source: sourceId,
                    filter: ['==', '$type', 'Point'],
                    paint: {
                        'circle-color': '#FF0000',
                        'circle-radius': 15,
                        'circle-opacity': 0.8,
                        'circle-stroke-color': '#FFFFFF',
                        'circle-stroke-width': 3
                    }
                });
            }
            */
            
            // 文字标签图层作为补充 - 优化配置以确保文字能够正常显示
            map.addLayer({
                id: labelLayerId,
                type: 'symbol',
                source: sourceId,
                filter: ['==', '$type', 'Point'],
                layout: {
                    // 简化文本显示，直接使用字符串模板
                    'text-field': ['concat', 'X:', ['get', 'x'], '\nY:', ['get', 'y']],
                    // 简化字体设置，使用最基本的字体回退
                    'text-font': ['sans-serif'],
                    'text-size': 24, // 进一步增加字体大小以提高可见性
                    'text-allow-overlap': true,
                    'text-ignore-placement': true,
                    'text-justify': 'center',
                    'text-offset': [0, 0],
                    'text-padding': 10, // 增加文字内边距
                    'text-rotation-alignment': 'map'
                },
                paint: {
                    'text-color': '#000000',
                    'text-halo-color': '#FFFFFF',
                    'text-halo-width': 3, // 调整光晕宽度
                    'text-opacity': 1,
                    'text-halo-blur': 0.5 // 调整光晕模糊度
                }
            }); // 移除特定参考图层，使用默认顺序
            
            // 注释掉备选数字点图层，移除额外的红色圆圈
            console.log('备选瓦片数字点图层已禁用');
            
            // 如果需要重新启用这个图层，请取消下面的注释
            /*
            // 添加额外的图层作为备选
            const numberLayerAltId = 'tile-coordinates-numbers-alt';
            if (!map.getLayer(numberLayerAltId)) {
                map.addLayer({
                    id: numberLayerAltId,
                    type: 'circle',
                    source: sourceId,
                    filter: ['==', '$type', 'Point'],
                    paint: {
                        'circle-color': '#FF0000',
                        'circle-radius': 20,
                        'circle-opacity': 0.9,
                        'circle-stroke-color': '#FFFFFF',
                        'circle-stroke-width': 4,
                        'circle-blur': 0.1
                    }
                });
            }
            */
            console.log('添加瓦片标签图层成功，ID:', labelLayerId);
            
            // 调试信息
            console.log('瓦片坐标图层初始化完成，特征数量:', features.length);
            console.log('当前地图图层顺序:', map.getStyle().layers.map(l => l.id).join(', '));
            
        } catch (error) {
            console.error('添加瓦片坐标图层失败:', error);
            // 重试机制，最多重试5次
            if (!window.tileCoordRetryCount || window.tileCoordRetryCount < 5) {
                window.tileCoordRetryCount = (window.tileCoordRetryCount || 0) + 1;
                console.log(`尝试第${window.tileCoordRetryCount}次重试`);
                setTimeout(tryAddLayers, 500);
            } else {
                console.error('达到最大重试次数，瓦片坐标显示失败');
                // 重置重试计数器
                window.tileCoordRetryCount = 0;
            }
        }
    };
    
    // 开始尝试添加图层
    tryAddLayers();
}

// 移除瓦片坐标显示
function removeTileCoordinates() {
    if (!map) {
        console.log('地图实例不存在，无法移除瓦片坐标');
        return;
    }
    
    const sourceId = 'tile-coordinates';
    const layerId = 'tile-coordinates-layer';
    const labelLayerId = 'tile-coordinates-labels';
    const bgLayerId = 'tile-coordinates-bg'; // 背景图层ID
    const numberLayerId = 'tile-coordinates-numbers'; // 数字点图层ID
    const numberLayerAltId = 'tile-coordinates-numbers-alt'; // 备选数字点图层ID
    
    try {
        // 即使地图样式未完全加载，也尝试移除图层，避免残留
        console.log('尝试移除瓦片坐标图层');
        
        // 重新调整图层移除顺序，确保先移除所有可能使用该数据源的图层
        // 背景图层应该优先移除，因为它可能在最底层
        const layersToRemove = [bgLayerId, layerId, numberLayerId, numberLayerAltId, labelLayerId];
        
        // 先检查并移除所有图层
        let layersRemoved = 0;
        layersToRemove.forEach(layer => {
            if (map.getLayer(layer)) {
                try {
                    map.removeLayer(layer);
                    layersRemoved++;
                    console.log('移除图层成功:', layer);
                } catch (layerError) {
                    console.warn(`移除图层${layer}时出错:`, layerError.message);
                }
            }
        });
        
        console.log(`共移除${layersRemoved}个图层`);
        
        // 检查是否还有其他图层使用该数据源
        if (map.getSource(sourceId)) {
            try {
                // 尝试移除数据源
                map.removeSource(sourceId);
                console.log('移除瓦片坐标源成功:', sourceId);
            } catch (sourceError) {
                console.error('移除数据源失败:', sourceError);
                // 如果移除失败，尝试找出仍在使用该数据源的图层
                try {
                    const style = map.getStyle();
                    if (style && style.layers) {
                        const usingLayers = style.layers.filter(layer => 
                            layer.source === sourceId
                        );
                        console.log(`仍在使用数据源${sourceId}的图层:`, 
                            usingLayers.map(l => l.id).join(', '));
                    }
                } catch (inspectError) {
                    console.error('检查图层使用情况失败:', inspectError);
                }
            }
        }
    } catch (error) {
        console.error('移除瓦片坐标图层时出错:', error);
    }
}

// 将经纬度转换为瓦片坐标
function lngLatToTile(lng, lat, zoom) {
    const n = Math.pow(2, zoom);
    const x = Math.floor((lng + 180) / 360 * n);
    const latRad = lat * Math.PI / 180;
    const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n);
    return { x: x, y: y };
}

// 将瓦片坐标转换为经纬度边界
function tileToLngLat(x, y, zoom) {
    const n = Math.pow(2, zoom);
    const lng1 = x / n * 360 - 180;
    const lat1 = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))) * 180 / Math.PI;
    const lng2 = (x + 1) / n * 360 - 180;
    const lat2 = Math.atan(Math.sinh(Math.PI * (1 - 2 * (y + 1) / n))) * 180 / Math.PI;
    return [lng1, lat2, lng2, lat1];
}

// 切换侧边栏显示/隐藏
function toggleSidebar() {
    console.log('切换侧边栏显示状态');
    if (sidebar) {
        // 检查当前是否有display: none样式
        if (sidebar.style.display === 'none' || sidebar.style.display === '') {
            sidebar.style.display = 'block';
            console.log('侧边栏已显示');
        } else {
            sidebar.style.display = 'none';
            console.log('侧边栏已隐藏');
        }
    }
}

// 页面加载完成后初始化
window.addEventListener('load', async () => {
    console.log('页面加载完成，开始初始化');
    // 确保侧边栏默认显示
    if (sidebar) {
        sidebar.style.display = 'block';
        console.log('侧边栏默认显示');
    }
    
    setupEventListeners();
    await initMap();
    updateUIState();
});